"use client";

import type { NextPage } from "next";
import React, { useRef } from "react";
import { Main } from "../remotion/MyComp/Main";
import VideoPlayer from "../components/VideoPlayer";
import { PlayerRef } from "@remotion/player";
import { Layout } from "antd";
import { Content, Footer } from "antd/es/layout/layout";
import Sider from "antd/es/layout/Sider";

const Home: NextPage = () => {
  const ref = useRef<PlayerRef>(null);

  return (
    <Layout className="h-full">
      <Layout>
        <Sider collapsible={true}>left sidebar</Sider>
        <Content>
          <div className="max-w-screen-md m-auto mb-5">
            <VideoPlayer video={Main} ref={ref} />
          </div>
        </Content>
        <Sider collapsible={true}>right sidebar</Sider>
      </Layout>
      <Footer>footer</Footer>
    </Layout>
  );
};

export default Home;
